<template>
  <el-container>
    <el-aside width="400px" class="curriculumManagementListForm_aside">
      <el-menu background-color="rgb(168,218,220)" text-color="#ffffff" style="height: 82vh;" active-text-color="#ffd04b"
        default-active="1">
        <el-menu-item index="1" @click="handleModule1">模块一：课程基本情况</el-menu-item>
        <el-menu-item index="2" @click="handleModule2">模块二：课程目标与毕业要求观测点的对应关系</el-menu-item>
        <el-menu-item index="3" @click="handleModule3">模块三：课程目标达成途径</el-menu-item>
        <el-menu-item index="4" @click="handleModule4">模块四：课程目标达成与评价方式及成绩评定对照表</el-menu-item>
        <el-menu-item index="5" @click="handleModule5">模块五：评分标准</el-menu-item>
        <el-menu-item index="6" @click="handleModule6">模块六：课程目标达成度评价方法————定量评价法</el-menu-item>
        <el-menu-item index="7" @click="handleModule7">模块七：评价依据和评价结果</el-menu-item>
        <el-menu-item index="8" @click="handleModule8">模块八：课程达成度分析和持续改进</el-menu-item>
      </el-menu>
    </el-aside>

    <el-main>
      <div class="firstForm" :hidden="selectFormView.module1View">
        <el-form v-model="form" label-width="120px">
          <el-form-item label="课程编号">
            <el-input v-model="form.courseCode" placeholder="请输入课程编号" style="width: 220px" />
          </el-form-item>
          <el-form-item label="课程名称">
            <el-input v-model="form.courseName" placeholder="请输入课程名称" style="width: 220px" />
          </el-form-item>
          <el-form-item label="学分">
            <el-input v-model="form.courseCredit" placeholder="请输入该课程学分" style="width: 220px" />
          </el-form-item>

          <el-form-item label="课程类别">
            <el-select v-model="form.courseCategory" placeholder="请选择课程类别">
              <el-option v-for="item in selectFormList.courseCategoryList" :key="item.title" :label="item.label"
                :value="item.title">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="考核方式">
            <el-select v-model="form.assessmentMethod" placeholder="请选择考核方式">
              <el-option v-for="item in selectFormList.assessmentMethodList" :key="item.title" :label="item.label"
                :value="item.title">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开课学期">
            <el-select v-model="form.startSemester" placeholder="请选择考核方式">
              <el-option v-for="item in selectFormList.startSemesterList" :key="item.title" :label="item.label"
                :value="item.title">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="授课对象">
            <el-select v-model="form.targetAudience" placeholder="请选择考核方式">
              <el-option v-for="item in selectFormList.targetAudienceList" :key="item.title" :label="item.label"
                :value="item.title">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="学时">
            <el-input v-model="form.courseHours" placeholder="请输入该课程学时" style="width: 220px" />
          </el-form-item>

          <el-form-item label="选课/班级人数">
            <el-input v-model="form.numberOfPeople" placeholder="请输入选课/班级人数" style="width: 220px" />
          </el-form-item>

          <el-form-item label="参评人数">
            <el-input v-model="form.numberOfParticipants" placeholder="请输入参评人数" style="width: 220px" />
          </el-form-item>

          <el-form-item label="达成度目标值	">
            <el-input v-model="form.achievementTargetValue" placeholder="请输入达成度目标值" style="width: 220px" />
          </el-form-item>
          <el-form-item label="任课教师	">
            <el-input v-model="form.classroomTeacher" placeholder="请输入任课教师姓名" style="width: 220px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button>Cancel</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="secondForm" :hidden="selectFormView.module2View">
        <el-form v-model="form" label-width="120px">
          <el-form-item>
            <el-table
              :data="form.correspondenceTableOfObservationPointsBetweenCourseObjectivesAndGraduationRequirementsTable"
              :row-style="{ height: '200px' }" border style="width: 100%;margin-left: -80px;" max-height="1256"
              height="700">
              <!-- <el-table-column type="index"></el-table-column> -->

              <el-table-column prop="date" label="课程目标" width="" align="center">
                <template v-slot="scope">
                  <el-input type="textarea" v-model="scope.row.courseObjectives" v-show="scope.row.iseditor" :rows="8" />
                  <span v-show="!scope.row.iseditor">{{ scope.row.courseObjectives }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="毕业要求" width="" align="center">
                <template v-slot="scope">
                  <el-input type="textarea" v-model="scope.row.graduationRequirements" v-show="scope.row.iseditor"
                    :rows="8" />
                  <span v-show="!scope.row.iseditor">{{ scope.row.graduationRequirements }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="毕业要求指标点" width="" align="center">
                <template v-slot="scope">
                  <el-input type="textarea" v-model="scope.row.graduationRequirementsIndicatorPoints"
                    v-show="scope.row.iseditor" :rows="8" />
                  <span v-show="!scope.row.iseditor">{{ scope.row.graduationRequirementsIndicatorPoints }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="" align="center">
                <template v-slot="scope">
                  <el-button type="warning" @click="edit(scope.row, scope)">编辑</el-button>
                  <el-button type="success" @click="save(scope.row, scope)">保存</el-button>
                  <el-button type="danger" @click="deleteRow(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button class="mt-4" style="width: 100%;margin-left: -80px;" @click="onAddItem">新建课程目标</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="thirdForm" :hidden="selectFormView.module3View">
        <el-form v-model="form" label-width="120px">
          <el-form-item>
            <el-table :data="form.courseObjectivesandPathwaystoAchieve" :row-style="{ height: '150px' }" border
              style="width: 100%;margin-left: -80px;" max-height="1256" height="700">
              <!-- <el-table-column type="index"></el-table-column> -->

              <el-table-column prop="date" label="课程目标" width="180" align="center">
                <template v-slot="scope">
                  <!-- <el-input type="textarea" v-model="scope.row.courseObjectives" v-show="scope.row.iseditor" :rows="8" /> -->
                  <span>{{ scope.row.courseObjectives }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="达成途径" width="" align="center">
                <template v-slot="scope">
                  <el-input type="textarea" v-model="scope.row.pathtoReach" v-show="scope.row.iseditor" :rows="5" />
                  <span v-show="!scope.row.iseditor">{{ scope.row.pathtoReach }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" align="center">
                <template v-slot="scope">
                  <el-button type="warning" @click="edit(scope.row, scope)">编辑</el-button>
                  <el-button type="success" @click="save(scope.row, scope)">保存</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>
      <div class="fourthForm" :hidden="selectFormView.module4View">
        <el-form v-model="form" label-width="150px">
          <h3>总评成绩组成</h3>
          <br>
          <el-table :data="form.CourseObjectivesAchievementandEvaluationMethodsandGradeEvaluationComparisonTable"
            :row-style="{ height: '50px' }" border style="width: 100%;" max-height="1256" height="300">
            <el-table-column prop="date" label="组成项目" width="" align="center">
              <template v-slot="scope">
                <el-select v-model="scope.row.compositionProject" placeholder="请选择组成项目">
                  <el-option v-for="item in selectFormList.compositionProjectList" :key="item.title" :label="item.label"
                    :value="item.title"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="计分方式" align="center">
              <template v-slot="scope">
                <el-radio-group v-model="scope.row.scoringMethod">
                  <el-radio label="百分制" />
                  <el-radio label="等级制" />
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="考核形式" align="center">
              <template v-slot="scope">
                <el-select v-model="scope.row.formOfAssessment" placeholder="请选择组成项目">
                  <el-option v-for="item in selectFormList.formOfAssessmentList" :key="item.title" :label="item.label"
                    :value="item.title"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="考试形式">
              <template v-slot="scope">
                <el-select v-model="scope.row.examinationFormat" placeholder="请选择组成项目">
                  <el-option v-for="item in selectFormList.examinationFormatList" :key="item.title" :label="item.label"
                    :value="item.title"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="占比(%)" width="" align="center">
              <template v-slot="scope">
                <el-input type="text" v-model="scope.row.proportion" :rows="1" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="" align="center">
              <template v-slot="scope">
                <el-button type="danger" @click="deleteRow_fourth(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button class="mt-4" style="width: 100%;" @click="addTotalScoreComposition">新建总评成绩组成</el-button>





          <h3>过程性考核设置</h3>
          <br>
          <el-table :data="form.processAssessmentSettings" :row-style="{ height: '50px' }" border style="width: 100%;"
            max-height="1256" height="300">

            <el-table-column prop="date" label="组成项目" width="" align="center">
              <template v-slot="scope">
                <el-select v-model="scope.row.compositionProject" placeholder="请选择组成项目">
                  <el-option v-for="item in selectFormList.processAssessmentComponentsList" :key="item.title"
                    :label="item.label" :value="item.title"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="计分方式" align="center">
              <template v-slot="scope">
                <el-radio-group v-model="scope.row.scoringMethod">
                  <el-radio label="百分制" />
                  <el-radio label="等级制" />
                </el-radio-group>
              </template>
            </el-table-column>

            <el-table-column prop="name" label="占比(%)" width="" align="center">
              <template v-slot="scope">
                <el-input type="text" v-model="scope.row.proportion" :rows="1" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="" align="center">
              <template v-slot="scope">
                <el-button type="" @click="detail_fourth(scope.$index)">详情</el-button>
                <el-button type="danger" @click="deleteRow_fourth(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <el-button class="mt-4" style="width: 100%;" @click="addProcessAssessmentSettings">新建过程性考核</el-button>
      </div>
      <!-- <div class="fourthForm_one" hidden=""></div> -->
      <div class="fifthForm" :hidden="selectFormView.module5View">
        <el-form v-model="form" label-width="120px">
          <el-table :data="form.finalityScoringCriteria" :row-style="{ height: '' }" style="width:100%;" max-height="1256"
            height="350">
            <el-table-column label="终结性考核与评价方式及成绩分布（分）" align="center">
              <el-table-column label="考核形式" align="center">
                <template v-slot="scope">
                  <span>{{ scope.row.assessmentForm }}</span>
                </template>
              </el-table-column>

              <el-table-column label="课程目标1" align="center">
                <el-table-column label="题号" align="center">
                  <template v-slot="scope">
                    <span>{{ scope.row.a1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="分值" align="center">
                  <template v-slot="scope">
                    <span>{{ scope.row.b1 }}</span>
                  </template>
                </el-table-column>

              </el-table-column>
              <el-table-column label="课程目标2" align="center">
                <el-table-column label="题号" align="center">
                  <template v-slot="scope">
                    <span>{{ scope.row.a2 }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="分值" align="center">
                  <template v-slot="scope">
                    <span>{{ scope.row.a2 }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="课程目标3" align="center">
                <el-table-column label="题号" align="center">
                  <template v-slot="scope">
                    <span>{{ scope.row.a3 }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="分值" align="center">
                  <template v-slot="scope">
                    <span>{{ scope.row.a3 }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="合计" align="center">
                <template v-slot="scope">
                  <span>{{ scope.row.total }}</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-form>
        <el-form v-model="form" label-width="120px">
          <el-table :data="form.proceduralScoringCriteria" :row-style="{ height: '' }" style="width:100%;"
            max-height="1256" height="350">
            <el-table-column label="过程性考核与评价方式及成绩分布（分）" align="center">
              <el-table-column label="考核形式" align="center">
                <template v-slot="scope">
                  <span>{{ scope.row.assessmentForm }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column v-for="(item, index) in form.courseObjectivesList" :key="index" :label="item">
                <template v-slot="scope">
                  <span>{{ scope.row.list[index].value }}</span>
                </template>
              </el-table-column> -->
              <el-table-column label="课程目标1" align="center">
                <template v-slot="scope">
                  <span>{{ scope.row.c1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="课程目标2" align="center">
                <template v-slot="scope">
                  <span>{{ scope.row.c1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="课程目标3" align="center">
                <template v-slot="scope">
                  <span>{{ scope.row.c1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="其他" align="center">
                <template v-slot="scope">
                  <span>{{ scope.row.c1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="合计" align="center">
                <template v-slot="scope">
                  <span>{{ scope.row.total }}</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-form>

      </div>
      <div class="sixthForm" :hidden="selectFormView.module6View">
        <el-form v-model="form" label-width="120px">
          <el-form-item>
            <el-table :data="form.evaluationMethodofCourseGoalAchievement" :row-style="{ height: '150px' }" border
              style="width: 100%;margin-left: -80px;" max-height="1256" height="700">
              <!-- <el-table-column type="index"></el-table-column> -->

              <el-table-column prop="date" label="课程目标" width="180" align="center">
                <template v-slot="scope">
                  <!-- <el-input type="textarea" v-model="scope.row.courseObjectives" v-show="scope.row.iseditor" :rows="8" /> -->
                  <span>{{ scope.row.courseObjectives }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="课程目标支撑内容" width="" align="center">
                <template v-slot="scope">
                  <el-input type="textarea" v-model="scope.row.courseObjectivesSupportingContent"
                    v-show="scope.row.iseditor" :rows="5" />
                  <span v-show="!scope.row.iseditor">{{ scope.row.courseObjectivesSupportingContent }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="评价值" width="" align="center">
                <template v-slot="scope">
                  <el-input type="textarea" v-model="scope.row.evaluationValue" v-show="scope.row.iseditor" :rows="5" />
                  <span v-show="!scope.row.iseditor">{{ scope.row.evaluationValue }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="达成度" width="100" align="center">
                <template v-slot="scope">
                  <el-input type="textarea" v-model="scope.row.degreeOfAchievement" v-show="scope.row.iseditor"
                    :rows="5" />
                  <span v-show="!scope.row.iseditor">{{ scope.row.degreeOfAchievement }}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="180" align="center">
                <template v-slot="scope">
                  <el-button type="warning" @click="edit(scope.row, scope)">编辑</el-button>
                  <el-button type="success" @click="save(scope.row, scope)">保存</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>
      <div class="seventhForm">
        <el-form v-model="form" label-width="120px" :hidden="selectFormView.module7View">
          <h3>评价依据和评价结果</h3>
          <br>
          <el-input v-model="form.evaluationBasisandEvaluationResults" :autosize="{ minRows: 10, maxRows: 10 }"
            type="textarea" placeholder="请输入评价依据和评价结果" />
          <p></p>
          <h3>课程目标达成情况柱状图</h3>
          <div id="myEcharts" style="width: 600px;height:400px;margin: auto;"></div>
        </el-form>
      </div>
      <div class="eighthForm" :hidden="selectFormView.module8View">
        <el-form v-model="form" label-width="120px">
          <h3>课程达成度分析和持续改进</h3>
          <br>
          <el-input v-model="form.courseAchievementAnalysisandContinuousImprovement"
            :autosize="{ minRows: 30, maxRows: 35 }" type="textarea" placeholder="请输入课程达成度分析和持续改进" />

        </el-form>
      </div>

    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { reactive } from "vue";
import * as echarts from 'echarts';
import { useRouter } from 'vue-router'

// import { ref } from "vue";
// import dayjs from "dayjs";

// 定义路由
const router = useRouter()


const selectFormView = reactive({
  module1View: false,
  module2View: true,
  module3View: true,
  module4View: true,
  module5View: true,
  module6View: true,
  module7View: true,
  module8View: true,
});

const form = reactive({
  // 下面是第一个表单的字段
  // 课程编号
  courseCode: "",
  // 课程名称
  courseName: "",
  // 课程类别
  courseCategory: "",
  // 考核方式
  assessmentMethod: "",
  // 开课学期
  startSemester: "",
  // 授课对象
  targetAudience: "",
  // 请输入选课/班级人数
  numberOfPeople: "",
  // 课程学分
  courseCredit: "",
  // 学时
  courseHours: "",
  // 参评人数
  numberOfParticipants: "",
  // 达成度目标值
  achievementTargetValue: "",
  // 任课教师
  classroomTeacher: "",

  // 下面是第二个表单的字段
  // 课程目标与毕业要求观测点的对应关系表
  correspondenceTableOfObservationPointsBetweenCourseObjectivesAndGraduationRequirementsTable:
    [
      {
        courseObjectives: "课程目标1：掌握C语言的基本数据类型、运算符和表达式构成；理解计算学科的基本概念、知识结构、典型方法，以及常用的算法；理解常用的算法；掌握三大流程控制结构：顺序、选择、循环；掌握数组的运用方法；掌握函数的运用方法；掌握指针的使用；掌握结构体的使用；掌握文件操作。",
        graduationRequirements: "1.工程知识",
        graduationRequirementsIndicatorPoints: "1.2掌握计算机科学的基本理论、基础知识和基本技能，理解计算机领域复杂工程问题。",
      },
      {
        courseObjectives: "课程目标2：能够理解用户需求、掌握函数的运用方法，具备应用结构化、模块化思想编写一般程序，编写、设计一个实际应用的能力。初步建立数字化、算法、模块化与层次化等核心专业意识和能力。",
        graduationRequirements: "3.设计/开发解决方案",
        graduationRequirementsIndicatorPoints: "3.1 能够设计满足特定需求的软件系统、功能模块和算法流程。",
      },
      {
        courseObjectives: "课程目标3：掌握软件开发工具的使用，对软件工程问题进行设计、实现和测试的能力，培养学生独立思考、提出问题、分析问题并解决实际问题的能力。",
        graduationRequirements: "5.使用现代工具",
        graduationRequirementsIndicatorPoints: "5.2 具备选择与使用恰当的技术、资源、现代软件工程工具，合理利用资源，对软件工程领域复杂问题进行设计、实现和测试的能力。",
      },
    ],


  // 下面是第三个表单的字段
  // 课程目标与达成途径
  courseObjectivesandPathwaystoAchieve: [
    {
      courseObjectives: "课程目标1",
      pathtoReach: "达成途径：通过课堂教授、提问与讨论、课后作业、阶段性测试等，使学生掌握流程控制、函数和数组等C语言编程基本知识、理论和方法。",
    }, {
      courseObjectives: "课程目标2",
      pathtoReach: "达成途径：通过课堂讲授、提问与讨论、编程实践等，使学生掌握基本的算法流程，具备设计满足特定需求的软件功能模块的基本能力。 ",
    }, {
      courseObjectives: "课程目标3",
      pathtoReach: "达成途径：通过实践教学，使学生掌握C语言程序的编辑与调试方法，具备设计、实现和测试C语言程序的能力。 ",
    }
  ],

  // 下面是第四个表单的字段
  CourseObjectivesAchievementandEvaluationMethodsandGradeEvaluationComparisonTable: [{
    compositionProject: "",
    proportion: "",
    scoringMethod: {
      oneHundredPercent: '',
      Hierarchy: ""
    },
    formOfAssessment: "",
    examinationFormat: "",
  },
  {
    overallRatingRatio: "",
    proportion: "",
    scoringMethod: {
      oneHundredPercent: '',
      Hierarchy: ""
    },
    formOfAssessment: "",
    examinationFormat: "",
  },
  ],

  processAssessmentSettings: [
    {
      compositionProject: "",
      proportion: "",
      scoringMethod: {
        oneHundredPercent: '',
        Hierarchy: ""
      },
    },
    {
      compositionProject: "",
      proportion: "",
      scoringMethod: {
        oneHundredPercent: '',
        Hierarchy: ""
      },
    },
    {
      compositionProject: "",
      proportion: "",
      scoringMethod: {
        oneHundredPercent: '',
        Hierarchy: ""
      },
    },
    {
      compositionProject: "",
      proportion: "",
      scoringMethod: {
        oneHundredPercent: '',
        Hierarchy: ""
      },
    },
    {
      compositionProject: "",
      proportion: "",
      scoringMethod: {
        oneHundredPercent: '',
        Hierarchy: ""
      },
    },


  ],







  // 下面是第五个表单的字段
  finalityScoringCriteria: [
    {
      assessmentForm: "填空",
      // courseObjectives: "",
      a1: "1",
      b1: "2",
      a2: "3",
      b2: "4",
      a3: "5",
      b3: "6",
      total: "15",
    },
    {
      assessmentForm: "选择",
      // courseObjectives: "",
      a1: "1",
      b1: "2",
      a2: "3",
      b2: "4",
      a3: "5",
      b3: "6",
      total: "15",
    },
    {
      assessmentForm: "程序分析",
      // courseObjectives: "",
      a1: "1",
      b1: "2",
      a2: "3",
      b2: "4",
      a3: "5",
      b3: "6",
      total: "15",
    },
    {
      assessmentForm: "程序设计",
      // courseObjectives: "",
      a1: "1",
      b1: "2",
      a2: "3",
      b2: "4",
      a3: "5",
      b3: "6",
      total: "15",
    },
    {
      assessmentForm: "卷面合计",
      // courseObjectives: "",
      a1: "1",
      b1: "2",
      a2: "3",
      b2: "4",
      a3: "5",
      b3: "6",
      total: "15",
    }
  ],
  proceduralScoringCriteria: [{
    assessmentForm: "出勤",
    // courseObjectives: "",
    c1: "1",
    c2: "3",
    c3: "5",
    other: "7",
    total: "15",
  },
  {
    assessmentForm: "课堂活动",
    // courseObjectives: "",
    c1: "1",
    c2: "3",
    c3: "5",
    other: "7",
    total: "15",
  },
  {
    assessmentForm: "作业测评",
    // courseObjectives: "",
    c1: "1",
    c2: "3",
    c3: "5",
    other: "7",
    total: "15",
  },
  {
    assessmentForm: "阶段性测试",
    // courseObjectives: "",
    c1: "1",
    c2: "3",
    c3: "5",
    other: "7",
    total: "15",
  },
  {
    assessmentForm: "实验（训）",
    // courseObjectives: "",
    c1: "1",
    c2: "3",
    c3: "5",
    other: "7",
    total: "15",
  },
  {
    assessmentForm: "合计",
    // courseObjectives: "",
    c1: "1",
    c2: "3",
    c3: "5",
    other: "7",
    total: "15",
  },
  ],


  // 下面是第六个表单的字段
  evaluationMethodofCourseGoalAchievement: [
    {
      courseObjectives: "课程目标1",
      courseObjectivesSupportingContent: "1.试卷（总分58分）2.课堂活动（总分25分）3.作业（总分15分，目标1占5分）4.阶段性测试（总分25分）目标值：58*0.6+（25+15/3+25）*0.4=56.8",
      evaluationValue: "1.试卷，全班平均得分：39.022.课堂活动，全班平均得分：16.897分3.作业，全班平均得分：12.775984.阶段性测试，全班平均得分：20.2337评价值：39.02*0.6+（16.897+12.77598/3+20.2337）*0.4=39.967744",
      degreeOfAchievement: "0.7037"
    },
    {
      courseObjectives: "课程目标2",
      courseObjectivesSupportingContent: "1.试卷（总分58分）2.课堂活动（总分25分）3.作业（总分15分，目标1占5分）4.阶段性测试（总分25分）目标值：58*0.6+（25+15/3+25）*0.4=56.8",
      evaluationValue: "1.试卷，全班平均得分：39.022.课堂活动，全班平均得分：16.897分3.作业，全班平均得分：12.775984.阶段性测试，全班平均得分：20.2337评价值：39.02*0.6+（16.897+12.77598/3+20.2337）*0.4=39.967744",
      degreeOfAchievement: "0.6540"
    },
    {
      courseObjectives: "课程目标3",
      courseObjectivesSupportingContent: "1.试卷（总分58分）2.课堂活动（总分25分）3.作业（总分15分，目标1占5分）4.阶段性测试（总分25分）目标值：58*0.6+（25+15/3+25）*0.4=56.8",
      evaluationValue: "1.试卷，全班平均得分：39.022.课堂活动，全班平均得分：16.897分3.作业，全班平均得分：12.775984.阶段性测试，全班平均得分：20.2337评价值：39.02*0.6+（16.897+12.77598/3+20.2337）*0.4=39.967744",
      degreeOfAchievement: "0.6956"
    }
  ],

  // 下面是第七个表单的字段
  // 评价依据和评价结果
  evaluationBasisandEvaluationResults: "",

  //下面试第八个表单的字段
  // 课程达成度分析和持续改进
  courseAchievementAnalysisandContinuousImprovement: "",


  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const selectFormList = reactive({
  // 课程类别列表
  courseCategoryList: [
    {
      label: "专业任选课",
      title: "professionalOptionalCourses",
    },
    {
      label: "通识必修课",
      title: "generalStudiesCompulsoryCourses",
    },
    {
      label: "通识选修课",
      title: "generalElective",
    },
    {
      label: "集中实践环节",
      title: "concentrateOnPractice",
    },
    {
      label: "学科基础课程",
      title: "subjectFoundationCourse",
    },
    {
      label: "素质拓展与创新创业教育项目",
      title:
        "qualityDevelopmentAndInnovationAndEntrepreneurshipEducationProgram",
    },
    {
      label: "专业必修课",
      title: "professionalCompulsoryCourses",
    },
    {
      label: "专业限选课",
      title: "professionalLimitedCourses",
    },
  ],
  // 考核方式列表
  assessmentMethodList: [
    {
      label: "闭卷考试",
      title: "closedBook",
    },
    {
      label: "开卷考试",
      title: "openBook",
    },
    {
      label: "课程论文",
      title: "coursePaper",
    },
    {
      label: "课程作品",
      title: "courseWorks",
    },
  ],
  // 授课对象列表
  targetAudienceList: [
    {
      label: "2019级软件工程1班",
      title: "201901",
    },
    {
      label: "2019级软件工程2班",
      title: "201902",
    },
    {
      label: "2019级软件工程3班",
      title: "201903",
    },
  ],
  // 开课学期列表
  startSemesterList: [
    {
      label: "2022-2023学年第2学期",
      title: "2022-202302",
    },
    {
      label: "2022-2023学年第1学期",
      title: "2022-202301",
    },
    {
      label: "2021-2022学年第2学期",
      title: "2021-202201",
    },
    {
      label: "2021-2022学年第1学期",
      title: "2021-202201",
    },
  ],
  // 组成项目列表
  compositionProjectList: [
    {
      label: "终结性考核",
      title: "1"
    },
    {
      label: "过程性考核",
      title: "2"
    },
  ],
  // 考核形式列表
  formOfAssessmentList: [
    {
      label: "考试",
      title: "1",
    }, {
      label: "考察",
      titile: "2",
    }
  ],
  // 考试形式列表
  examinationFormatList: [
    {
      label: "试卷",
      title: "1",
    },
    {
      label: "课程作品",
      title: "2",
    },
    {
      label: "课程论文",
      title: "3",
    },
  ],
  processAssessmentComponentsList: [
    {
      label: "出勤",
      title: "1"
    },
    {
      label: "课堂活动",
      title: "2"
    },
    {
      label: "作业测评",
      title: "3"
    },
    {
      label: "阶段性测试",
      title: "4"
    },
    {
      label: "实验（训）",
      title: "5"
    },
  ]

});

// 增加一行表单
const onAddItem = () => {
  form.correspondenceTableOfObservationPointsBetweenCourseObjectivesAndGraduationRequirementsTable.push(
    {
      courseObjectives: "",
      graduationRequirements: "",
      graduationRequirementsIndicatorPoints: "",
    },
  );
};

// 增加一行总评成绩组成
const addTotalScoreComposition = () => {
  form.CourseObjectivesAchievementandEvaluationMethodsandGradeEvaluationComparisonTable.push(
    {
      compositionProject: "",
      proportion: "",
      scoringMethod: {
        oneHundredPercent: '',
        Hierarchy: ""
      },
      formOfAssessment: "",
      examinationFormat: "",
    },
  );
};

const addProcessAssessmentSettings = () => {
  form.processAssessmentSettings.push(
    {
      compositionProject: "",
      proportion: "",
      scoringMethod: {
        oneHundredPercent: '',
        Hierarchy: ""
      },
    })
}


const onSubmit = () => {
  console.log("submit!");
};

// 编辑、保存与删除
const edit = (row: { iseditor: boolean; }, index: unknown) => {
  row.iseditor = true;
}
const save = (row: { iseditor: boolean; }, index: unknown) => {
  row.iseditor = false;
}
const deleteRow = (index: number) => {
  form.correspondenceTableOfObservationPointsBetweenCourseObjectivesAndGraduationRequirementsTable.splice(
    index,
    1
  );
};
// 第四个表单中的删除
const deleteRow_fourth = (index: number) => {
  form.CourseObjectivesAchievementandEvaluationMethodsandGradeEvaluationComparisonTable.splice(
    index,
    1
  );
};
// 详情页跳转
const detail_fourth=(index:number)=>{
  router.push("/curriculumManagement/curriculumManagementList/processAssessment.vue");
}

// 柱状图
/// 声明定义一下echart
let echart = echarts;

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  echart.dispose;
});

// 基础配置Echarts
const initChart = () => {
  let chart = echart.init(document.getElementById("myEcharts"), "light");
  // 把配置和数据放这里
  chart.setOption({
    xAxis: {
      type: "category",
      data: [
        "课程目标1",
        "课程目标2",
        "课程目标3"
      ]
    },
    tooltip: {
      trigger: "axis"
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [
          0.7037,
          0.6540,
          0.6956
        ],
        type: "bar",
        smooth: true
      }
    ]
  });
  window.onresize = function () {
    //自适应大小
    chart.resize();
  };
}

// return { initChart };

// 下面都是切换表单
const handleModule1 = () => {
  selectFormView.module1View = false;
  selectFormView.module2View = true;
  selectFormView.module3View = true;
  selectFormView.module4View = true;
  selectFormView.module5View = true;
  selectFormView.module6View = true;
  selectFormView.module7View = true;
  selectFormView.module8View = true;
};
const handleModule2 = () => {
  selectFormView.module1View = true;
  selectFormView.module2View = false;
  selectFormView.module3View = true;
  selectFormView.module4View = true;
  selectFormView.module5View = true;
  selectFormView.module6View = true;
  selectFormView.module7View = true;
  selectFormView.module8View = true;
};
const handleModule3 = () => {
  selectFormView.module1View = true;
  selectFormView.module2View = true;
  selectFormView.module3View = false;
  selectFormView.module4View = true;
  selectFormView.module5View = true;
  selectFormView.module6View = true;
  selectFormView.module7View = true;
  selectFormView.module8View = true;
};
const handleModule4 = () => {
  selectFormView.module1View = true;
  selectFormView.module2View = true;
  selectFormView.module3View = true;
  selectFormView.module4View = false;
  selectFormView.module5View = true;
  selectFormView.module6View = true;
  selectFormView.module7View = true;
  selectFormView.module8View = true;
};
const handleModule5 = () => {
  selectFormView.module1View = true;
  selectFormView.module2View = true;
  selectFormView.module3View = true;
  selectFormView.module4View = true;
  selectFormView.module5View = false;
  selectFormView.module6View = true;
  selectFormView.module7View = true;
  selectFormView.module8View = true;
};
const handleModule6 = () => {
  selectFormView.module1View = true;
  selectFormView.module2View = true;
  selectFormView.module3View = true;
  selectFormView.module4View = true;
  selectFormView.module5View = true;
  selectFormView.module6View = false;
  selectFormView.module7View = true;
  selectFormView.module8View = true;
};
const handleModule7 = () => {
  selectFormView.module1View = true;
  selectFormView.module2View = true;
  selectFormView.module3View = true;
  selectFormView.module4View = true;
  selectFormView.module5View = true;
  selectFormView.module6View = true;
  selectFormView.module7View = false;
  selectFormView.module8View = true;
};
const handleModule8 = () => {
  selectFormView.module1View = true;
  selectFormView.module2View = true;
  selectFormView.module3View = true;
  selectFormView.module4View = true;
  selectFormView.module5View = true;
  selectFormView.module6View = true;
  selectFormView.module7View = true;
  selectFormView.module8View = false;
};

</script>
<style scoped>
.curriculumManagementListForm_aside {
  background: rgb(168, 218, 220);
}
</style>